<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>各种示例</title>
		<link rel="stylesheet" type="text/css" href="css/public.css" />
		<!-- app里面放各种公用的CSS -->
		<style type="text/css">
			#alert_border {
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.3);
				position: absolute;
				top: 0;
				left: 0;
				z-index: 10;
				/* 方法一实现显示隐藏 */
				/* visibility:hidden; */
				display: none;
			}

			#alert_border #alert1,
			#alert_border #alert2 {
				width: 65rem;
				height: 40rem;
				background: #fff;
				border-radius: 0.5rem;
				position: absolute;
				top: 11rem;
				left: calc(50% - 32.5rem);
				/* visibility:hidden; */
				display: none;
			}

			#alert_border .alert_title {
				width: 100%;
				height: 4rem;
				align-items: center;
			}

			#alert_border .alert_title .alert_close:hover {
				cursor: pointer;
			}

			#alert_border .alert_content {
				width: 100%;
				height: calc(40rem - 10rem);
			}

			#alert_border .alert_foot {
				width: 100%;
				height: 6rem;
			}
		</style>
	</head>
	<body>
		<div class="header_tab">
			<div class="flex_between" style="height: 100%;">
				<div class="text_center font_14" style="width: 20%;background: #FFFF00;">头部标题（文字居中、文字大小1.4rem）</div>
				<div class="text_left font_18" style="width: 20%;background: #FFFF00;">弹性盒子的头部（文字居左、文字大小1.8rem）</div>
				<div class="text_right font_20" style="width: 20%;background: #FFFF00;">两侧不留位置的剩下的位置填充进整个盒子（文字居右、文字大小2rem）</div>
				<div class="text_center font_24" style="width: 20%;background: #FFFF00;">并且让DIV在中间显示（文字居中、文字大小2.4rem）</div>
			</div>
		</div>
		<div class="body_conent">
			<div class="padding_left10">
				<div style="width: 100%;text-align: center;background: red;" class="font_18">盒子两侧留了相对页面宽度的10%的留白</div>
			</div>
			<div class="padding_left5 padding_top">
				<div style="width: 100%;text-align: center;background: red;" class="font_18">盒子两侧留了相对页面宽度的5%的留白</div>
			</div>
			<div class="padding_top text_center font_20">用DIV写一个按钮alert效果</div>
			<div class="padding_left5 flex_around padding_top">
				<div class="btn_green text_center " style="padding: 10px 0;width: 220px;background: linear-gradient(180deg, #3997f5, #7829f1);" onclick="alert_border1()">原本的alert弹出框</div>
				<div class="btn_red text_center btn_radius" style="padding: 10px 0;width: 220px;" onclick="alert_border2()">自设绝对位置的弹出框</div>
				<div class="btn_blue text_center btn_round" style="padding: 10px 0;width: 220px;" onclick="alert_border3()">弹出框内容可以滚动实现</div>
			</div>
		</div>
		<div class="fooot_tab">
			<div class="flex_around" style="height: 100%;">
				<div class="text_center font_14" style="width: 20%;background: #FFFF00;">底部标题（文字居中、文字大小1.4rem）</div>
				<div class="text_left font_18" style="width: 20%;background: #FFFF00;">弹性盒子的头部（文字居左、文字大小1.8rem）</div>
				<div class="text_right font_20" style="width: 20%;background: #FFFF00;">两侧留白将剩下的区域填充进盒子（文字居右、文字大小2rem）</div>
				<div class="text_center font_24" style="width: 20%;background: #FFFF00;">并且让DIV在中间显示（文字居中、文字大小2.4rem）</div>
			</div>
		</div>
		<div id="alert_border">
			<div id="alert1" class="padding_box20">
				<div class="alert_title flex_between">
					<div class="font_18">弹出框1标题</div>
					<div onclick="alert_close()" style="width: 4rem;" class="text_right font_20 alert_close">✖</div>
				</div>
				<div class="alert_content" style="overflow: hidden;">
					<div class="font_14">字体大小正常的1.4rem<span>这是个span标签</span>测试内容测试内容<span class="text_red font_24">测试</span>内容测试内容测试内容测试内容测试内容测试内容测试内容
						<p class="text_green">p标签并且字体颜色为绿色</p>测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容</div>
					<div style="text-indent:2rem;" class="font_16 padding_top">首行缩进2rem效果、字体大小为1.6rem测试内容测试内容<span class="text_red">测试</span>内容测试内容测试内容测试内容测试内容测试内容测试内容
						测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容</div>
				</div>
				<div class="alert_foot flex_around">
					<div onclick="alert_close()" class="btn_radius btn_red text_center" style="padding: 10px 0;width: 120px;">关闭按钮</div>
				</div>
			</div>
			<div id="alert2" class="padding_box20">
				<div class="alert_title flex_between">
					<div>弹出框2标题</div>
					<div onclick="alert_close()" style="width: 4rem;" class="text_right font_20 alert_close">✖</div>
				</div>
				<div class="alert_content" style="overflow-x: hidden;overflow-y: auto;">
					<div class="font_24">为了显示alert的滚动效果（没有设置滚动条样式，滚动条样式可以自己修改）</div>
					<div class="font_14">字体大小正常的1.4rem<span>这是个span标签</span>测试内容测试内容<span class="text_red font_24">测试</span>内容测试内容测试内容测试内容测试内容测试内容测试内容
						<p class="text_green">p标签并且字体颜色为绿色</p>测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容</div>
					<div style="text-indent:2rem;" class="font_16 padding_top">首行缩进2rem效果、字体大小为1.6rem测试内容测试内容<span class="text_red">测试</span>内容测试内容测试内容测试内容测试内容测试内容测试内容
						测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容</div>
					<div class="font_14">字体大小正常的1.4rem<span>这是个span标签</span>测试内容测试内容<span class="text_red font_24">测试</span>内容测试内容测试内容测试内容测试内容测试内容测试内容
						<p class="text_green">p标签并且字体颜色为绿色</p>测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容</div>
					<div style="text-indent:2rem;" class="font_16 padding_top">首行缩进2rem效果、字体大小为1.6rem测试内容测试内容<span class="text_red">测试</span>内容测试内容测试内容测试内容测试内容测试内容测试内容
						测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容</div>
					<div class="font_14">字体大小正常的1.4rem<span>这是个span标签</span>测试内容测试内容<span class="text_red font_24">测试</span>内容测试内容测试内容测试内容测试内容测试内容测试内容
						<p class="text_green">p标签并且字体颜色为绿色</p>测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容</div>
					<div style="text-indent:2rem;" class="font_16 padding_top">首行缩进2rem效果、字体大小为1.6rem测试内容测试内容<span class="text_red">测试</span>内容测试内容测试内容测试内容测试内容测试内容测试内容
						测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容</div>
					<div class="font_14">字体大小正常的1.4rem<span>这是个span标签</span>测试内容测试内容<span class="text_red font_24">测试</span>内容测试内容测试内容测试内容测试内容测试内容测试内容
						<p class="text_green">p标签并且字体颜色为绿色</p>测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容</div>
					<div style="text-indent:2rem;" class="font_16 padding_top">首行缩进2rem效果、字体大小为1.6rem测试内容测试内容<span class="text_red">测试</span>内容测试内容测试内容测试内容测试内容测试内容测试内容
						测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容</div>
				</div>
				<div class="alert_foot flex_around">
					<div onclick="alert_close()" class="btn_radius btn_red text_center" style="padding: 10px 0;width: 120px;">关闭按钮</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		function alert_border1() {
			alert('系统自带弹出框');
		}

		function alert_border2() {
			/* 显示隐藏方法一 用visibility属性*/
			// document.getElementById('alert_border').style.visibility="visible";
			// document.getElementById('alert1').style.visibility="visible";
			// document.getElementById('alert2').style.visibility="hidden";
			/* 方法二 用display属性 */
			document.getElementById('alert_border').style.display="block";
			document.getElementById('alert1').style.display="block";
			document.getElementById('alert2').style.display="none";
		}

		function alert_border3() {
			// document.getElementById('alert_border').style.visibility="visible";
			// document.getElementById('alert1').style.visibility="hidden";
			// document.getElementById('alert2').style.visibility="visible";
			
			document.getElementById('alert_border').style.display="block";
			document.getElementById('alert1').style.display="none";
			document.getElementById('alert2').style.display="block";
		}

		function alert_close() {
			// document.getElementById('alert_border').style.visibility="hidden";
			// document.getElementById('alert1').style.visibility="hidden";
			// document.getElementById('alert2').style.visibility="hidden";
			// 
			document.getElementById('alert_border').style.display="none";
			document.getElementById('alert1').style.display="none";
			document.getElementById('alert2').style.display="none";
		}
	</script>
</html>
